<template>
  <div style="width: 100%">
    <div class="article" v-if="articleList.length>0" v-for="(item, i) in articleList" :key="i">
      <div class="article_main" @click="editClick(item.artId)" :class="{w70: hasDel || hasEdit,}">
        <p class="article-title p-line">{{ item.title }}</p>
        <!--				<p class="article-content p-line">{{item.context}}</p>-->

        <el-row class="article-info">
          <el-col :span="12">
            <!-- <div class="grid-content icon-all">
              <span class="iconfont icon-all-one">&#xe603;</span>
              <span class="article-info-number">{{ item.hits?item.hits:'0' }}</span>
              <span class="iconfont">&#xec8c;</span>
              <span class="article-info-number">{{ item.likes?item.likes:'0' }}</span>
              <span class="iconfont">&#xe666;</span>
              <span class="article-info-number">{{ item.favorites?item.favorites:'0' }}</span>
            </div> -->
          </el-col>
          <el-row class="article-info">
            <el-col :span="12">
              <div class="grid-content icon-all">
                <span class="iconfont icon-all-one">&#xe603;</span>
                <span class="article-info-number">{{ item.hits }}</span>
                <span class="iconfont">&#xec8c;</span>
                <span class="article-info-number">{{ item.likes }}</span>
                <span class="iconfont">&#xe666;</span>
                <span class="article-info-number">{{ item.favorites }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content article-author">{{ item.authorName }}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content article-date">{{ item.publishTime }}</div>
            </el-col>
          </el-row>
          <el-col :span="6">
            <!-- <div class="grid-content article-author">{{ item.authorName }}</div> -->
          </el-col>
          <el-col :span="6">
            <div class="grid-content article-date">{{ item.uploadTime }}</div>
          </el-col>
        </el-row>
      </div>
      <div class="article_right">
        <!--				<el-button type="success" v-if="hasEdit" size="small" @click="editClick" style="margin-right: 10px">编辑</el-button>-->
        <!--				<el-popconfirm v-if="hasDel" title="确定删除吗？" confirm-button-text="确定" cancel-button-text="取消">-->
        <!--					<el-button slot="reference" type="danger" size="small">删除</el-button>-->
        <!--				</el-popconfirm>-->
        <!-- <el-popconfirm title="确定删除吗？" confirm-button-text="确定" cancel-button-text="取消" @confirm='delClick(item.draftId)'>
          <el-button slot="reference" type="danger" size="small">删除</el-button>
        </el-popconfirm> -->


<!--        <el-button type="success" size="small" @click="editClick(item.draftId)" style="margin-right: 10px">编辑</el-button>-->
<!--        <el-popconfirm-->
<!--          title="确定删除吗？"-->
<!--          confirm-button-text="确定"-->
<!--          cancel-button-text="取消"-->
<!--          @confirm='delClick(item.draftId)'-->
<!--        >-->
<!--          <el-button slot="reference" type="danger" size="small"-->
<!--          >删除</el-button-->
<!--          >-->
<!--        </el-popconfirm>-->
      </div>
    </div>
    <!-- <el-pagination background layout="prev, pager, next" :current-page="page" :page-size="pageSize"
      @current-change="handleCurentChange" :total="total" class="pagination">
    </el-pagination> -->
  </div>
</template>

<script>
export default {
  name: "articleShow",
  props: ["hasDel", "hasEdit", "articleList", "total", "catalogue"],
  data() {
    return {
      //分页器所在页数
      page: 1,
      //每页有几个
      pageSize: 5,
    };
  },
  methods: {
    delClick(artId) {
      this.$emit("delete", artId);
    },
    editClick(artId) {
      // this.$router.push("/writing");
      if (this.$cookies.get(this.$api.TOKENKEY)) {
        let link = this.$router.resolve({
          path: "/article",
          query: {artId: artId},
        });
        window.open(link.href, "_blank");
      } else {
        message({
          message: "未登录或者登录状态已过期，清重新登录",
          type: "error",
          duration: 1000,
        });
      }
      //页码变化时，触发函数
    },
    // async handleCurentChange(value) {
    //   let res = await this.$api.reqGeneralAllByCatalogue(
    //     this.catalogue,
    //     value,
    //     5
    //   );
    //   if (res.code === 200) {
    //     for (let item of res.rows) {
    //       item.publishTime = renderTime(item.publishTime);
    //       item.thumbnail = this.$api.BASEURL + item.thumbnail;
    //     }
    //     this.articleList = res.rows;
    //   }
    // },
  },
}
</script>

<style scoped lang="less">
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.bg-purple {
  background: #d3dce6;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.article {
  margin-top: 20px;
  margin-left: 10px;
  -moz-box-shadow: 2px 2px 10px #d7d7d7;
  -webkit-box-shadow: 2px 2px 10px #d7d7d7;
  box-shadow: 2px 2px 10px #d7d7d7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;

  .article_main {
    text-align: left;
    padding: 20px;
    box-sizing: border-box;
    flex: 1;
    width: 80%;
  }

  .w70 {
    width: 70%;
  }

  .p-line {
    padding-left: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .article-title {
    font-size: 18px;
  }

  .article-content {
    margin-top: 15px;
    font-size: 16px;
    color: #797979;
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .article-info {
    margin-top: 20px;

    .icon-all {
      padding-left: 20px;

      .icon-all-one {
        font-size: 16px;
      }

      .article-info-number {
        font-size: 14px;
        padding-left: 5px;
        margin-right: 20px;
        vertical-align: bottom;
      }
    }

    .article-author {
      text-align: right;
      color: #797979;
      font-size: 14px;
    }

    .article-date {
      padding-right: 10px;
      text-align: right;
      color: #797979;
      font-size: 14px;
    }
  }
}

.article_right {
  display: flex;
  align-items: center;
  padding-right: 20px;

  .el-button {
    padding: 9px 15px;
  }
}

.pagination {
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>
